<template>
  <view class="videoList">
    <u-navbar
      :title="title"
      bgColor="#000"
      leftIconColor="#fff"
      leftIconSize="40rpx"
      titleStyle="color:#fff"
      height="100rpx"
      @leftClick="leftClick"
    >
    </u-navbar>

    <view class="downLoad">
      <view class="left">
        <u-avatar src="../../static/logo.png" shape="square"></u-avatar>
        <text> Get the full experience on the app</text>
      </view>
      <view class="right">
        <u-button
          type="primary"
          size="small"
          shape="circle"
          text="open"
          @tap="goPage"
        ></u-button>
      </view>
    </view>

    <view v-if="isShow" class="videoContent">
      <view class="top">
        <image class="image_warp" mode="widthFix" :src="dataObj.Image" />
        <view class="text-wraper">
          <text class="text-title">{{ dataObj.Title }}</text>
          <text class="text-desc">
            {{ dataObj.Desc }}
          </text>
          <view class="text-icon-wrap"> </view>
        </view>
      </view>

      <view class="videoListContent">
        <u-tabs
          :list="dataObj.Episodes"
          lineColor="#fe5d68"
          :activeStyle="{
            color: '#FFF',
            fontWeight: 'bold',
            transform: 'scale(1.05)',
          }"
          @click="clickHandle"
        >
        </u-tabs>
        <view v-if="dataLits.length" class="videoListBody">
          <view
            v-for="item in dataLits"
            class="text-wrapper"
            @tap="showHandle(item)"
          >
            <view v-if="item.Lock == 0" class="itemCont">
              <view class="text">{{ item.Episode }}</view>
            </view>
            <view v-else-if="item.Lock == 1" class="itemCont Lock">
              <view class="text">{{ item.Episode }}</view>
              <image
                class="iconImages"
                referrerpolicy="no-referrer"
                src="../../static/icon_lock.png"
              />
            </view>
            <view v-else-if="item.Lock == 2" class="itemCont unlock">
              <view class="text">{{ item.Episode }}</view>
              <image
                class="iconImages"
                referrerpolicy="no-referrer"
                src="../../static/icon_unlock.png"
              />
            </view>
          </view>
        </view>
        <view v-else class="noContent">
          <u-empty
            text="Your list has no data yet"
            textColor="#fff"
            textSize="28rpx"
            width="300rpx"
            icon="../../static/img_notdata.png"
          >
          </u-empty>
        </view>
      </view>
    </view>

    <view v-else class="lockContent">
      <image src="/static/icon_lock_img.png" class="icon_lock"></image>
      <text class="lock_text"
        >This episode requires downloading <br />
        the app to watch</text
      >
      <view class="lock_btn">
        <button type="default" class="user_btn" @tap="goPage">
          <u-icon name="download" color="#000" size="32"></u-icon>Download the
          app
        </button>
      </view>
    </view>

    <view class="bottomNav">
      <u-icon
        @tap="goHome"
        class="home-icon"
        name="home"
        size="34"
        color="#fff"
        hoverClass="cur"
      ></u-icon>
      <u-button type="primary" @tap="goPage">
        <u-icon
          name="download"
          size="34"
          color="#fff"
          hoverClass="cur"
        ></u-icon>
        GET APP
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "An unspeakable secret",
      dataObj: {},
      dataLits: [],
      isShow: true,
      id: null,
    };
  },
  onLoad(options) {
    this.title = options.title;
    this.id = options.id;
    this.initData(options.id);
  },
  methods: {
    leftClick() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    goPage() {
      uni.navigateTo({
        url: "/pages/downLoad/downLoad",
      });
    },
    goHome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    clickHandle(item) {
      this.dataLits = item.List;
    },
    initData(id) {
      uni.request({
        url: "https://api.flowshort.tv/video/detail",
        header: {
          "content-type": "application/json",
          "Access-Control-Allow-Origin": "*",
        },
        data: {
          id: Number(id),
        },
        method: "POST",
        success: (res) => {
          if (res.statusCode == 200) {
            this.dataObj = res.data.Data;
            if (this.title == "undefined") {
              this.title = res.data.Data.Title;
            }
            this.dataObj["Episodes"] = this.dataObj?.Episodes?.map((item) => {
              return {
                name: item.EpisodesRange,
                ...item,
              };
            });
            this.dataLits = this.dataObj?.Episodes[0]?.List;
          }
        },
      });
    },
    showHandle(item) {
      console.log("item: ", item);
      if (item.Lock == 0) {
        uni.navigateTo({
          url:
            "/pages/showVideo/showVideo?id=" +
            this.id +
            "&Episode=" +
            item.Episode +
            "&Title=" +
            this.dataObj.Title,
        });
      } else if (item.Lock == 1) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.videoList {
  width: 100%;
  position: relative;
  background-color: #000;
  min-height: 100vh;

  .downLoad {
    position: fixed;
    top: 100rpx;
    left: 0;
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    //背景颜色渐变
    background: linear-gradient(to right, #fe5d68, #fe7861);
    padding: 0 30rpx;
    z-index: 9999;
    .left {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #fff;
      .u-avatar {
        margin-right: 20rpx;
      }
    }

    .right {
      .u-button--primary {
        background-color: #fff;
        border: none;
        color: #fe5d68;
        text-transform: uppercase;
      }
    }
  }

  .videoContent {
    width: 100%;
    margin-top: 240rpx;
    padding: 30rpx 30rpx 140rpx 30rpx;

    .top {
      display: flex;
      margin-bottom: 20rpx;
      width: 100%;
      padding: 0 20rpx;

      .image_warp {
        width: 200rpx;
        height: 264rpx;
        border-radius: 16rpx;
      }

      .text-wraper {
        margin-left: 30rpx;
        font-family: PingFangSC, PingFang SC;
        width: calc(100% - 180rpx);
        padding-right: 20rpx;
        display: flex;
        flex-direction: column;
        padding-top: 20rpx;

        .text-title {
          width: 100%;
          font-size: 32rpx;
          line-height: 32rpx;
          font-weight: 500;
          color: #ffffff;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-bottom: 16rpx;
        }

        .text-icon-wrap {
          display: block;
          display: flex;
          flex-direction: row;
          align-items: center;
          flex-wrap: wrap;

          .text-icon {
            display: inline-block;
            font-size: 24rpx;
            line-height: 24rpx;
            font-weight: 400;
            color: #c2c2c2;
            padding: 4rpx 6rpx;
            word-break: break-all;
            border-radius: 8rpx;
            border: 1rpx solid #737373;
          }
        }

        .text-desc {
          display: block;
          font-size: 24rpx;
          color: #7d7d7d;
          padding: 10rpx 10rpx 10rpx 0;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
      }
    }
  }

  .bottomNav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 110rpx;
    z-index: 999;
    display: flex;
    align-items: center;
    background-color: #000;

    .home-icon {
      margin-left: 30rpx;
      color: #fff;
      width: 220rpx;
      font-size: 60rpx;
      display: flex;
      justify-content: center;

      .u-icon__icon {
        width: 60rpx;
        height: 60rpx;
        color: #fff;
      }

      .cur {
        color: #fe5d68;
      }
    }

    .u-button--primary {
      flex: 1;
      background: linear-gradient(to right, #fe5d68, #fe7861);
      border: none;
      color: #fff;
      text-transform: uppercase;
      border-radius: 0;
      height: 110rpx;
      font-size: 36rpx;
      display: flex;
      font-weight: 400;
    }
  }
  .videoListContent {
    color: #fff;

    ::v-deep .u-tabs {
      .u-tabs__wrapper__nav__item__text {
        font-weight: 600 !important;
      }
    }

    .videoListBody {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -10rpx 0 -10rpx;
      padding-top: 20rpx;
      .text-wrapper {
        width: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10rpx 0 10rpx;
        .itemCont {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(55, 55, 55, 1);
          border-radius: 8px;
          height: 88rpx;
          width: 100%;
          margin: 0 10rpx 20rpx 10rpx;
          padding: 22rpx 52rpx 22rpx 52rpx;
          position: relative;
        }
        .text {
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 32rpx;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: right;
          white-space: nowrap;
          line-height: 44rpx;
        }
        .iconImages {
          position: absolute;
          right: 0;
          top: 0;
          width: 30rpx;
          height: 28rpx;
        }
      }
    }
    .noContent {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
  }

  .lockContent {
    width: 100%;
    margin-top: 340rpx;
    padding: 30rpx 30rpx 140rpx 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: #fff;
    font-size: 36rpx;
    font-weight: 500;
    .icon_lock {
      width: 112rpx;
      height: 132rpx;
    }
    .lock_text {
      margin-top: 50rpx;
      font-size: 32rpx;
      font-weight: 400;
      line-height: 1.6;
    }
    .lock_btn {
      margin: 60rpx 0;
      width: 480rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .user_btn {
        width: 100%;
        padding: 0 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
